<template>
  <div class="images-box" ref="imgList" >
    <div class="img-list"  v-show="isShowImg">
      <div class="banner-img" v-for="(item, index) in bannerImg" :key="index" v-show="imgIndex == index" :class="imgIndex == index?'show-img':'hidd-img'">
        <el-image class="imgstyle" :src="baseApi + item.imgUrl" fit="cover" />
      </div>
    </div>
    <!-- <div class="trigger">
      <div @click="trigger('prov')">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 60 60" class="right-btn">
          <path stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="
                M0 30 L60 30  
                M30 0 L0 30 
                M30 60 L0 30"></path>
        </svg>
      </div>
      <div @click="trigger('next')">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 60 60" class="right-btn">
          <path stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="
                M0 30 L60 30  
                M30 60 L60 30
                M30 0 L60 30"></path>
        </svg>
      </div>
    </div> -->
    <div class="mobel-btn" @click="changeScroll()" v-show="isShowImg">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 60 80"
        class="right-btn"
      >
        <path
          stroke="#fff"
          stroke-miterlimit="10"
          stroke-width="4"
          d="
                M30 0 L30 80  
                M0 50 L30 80 
                M60 50 L30 80"
        ></path>
      </svg>
    </div>
    <!-- <div class="bottom-dot">
      <div v-for="(item, index) in bannerImg" :key="index" @click="handleDot(index)" class="pot-type"
        :class="imgIndex == index ? 'pot-active' : ''"></div>
    </div> -->
  </div>
</template>

<script>
import gsap from "gsap"
import {ScrollToPlugin} from "gsap/ScrollToPlugin"
gsap.registerPlugin(ScrollToPlugin)
import banner1 from "@/assets/imgs/banner1.jpg";
export default {
  name: "bannerList",
  props: {
    bannerImg: {
      style: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      banner1: banner1,
      imgIndex: 0,
      isShowImg: true,
      imageWidth: 0,
      imageHeight: 0,
      windowWight: window.innerWidth,
      baseApi: process.env.VUE_APP_IMGADDRESS,
      timer: null,
    };
  },

  mounted() {
    this.getImageSize();
    this.setChangeBanner()
       window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    clearInterval(this.timer)
  },

  methods: {
    changeScroll() {
      gsap.to(window, { duration: 1, scrollTo: window.innerHeight });
    },
    setChangeBanner() {
      if(this.timer){
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.imgIndex = this.imgIndex == this.bannerImg.length - 1 ? 0 : this.imgIndex + 1;
      }, 8000)
    },
    getImageSize() {
      const img = new Image();
      img.src = this.banner1;
      img.onload = () => {
        this.imageWidth = img.width;
        this.imageHeight = img.height;
      };
    },
    trigger(val) {
      if (val == "prov") {
        this.imgIndex =
          this.imgIndex == 0 ? this.bannerImg.length - 1 : this.imgIndex - 1;
      } else {
        this.imgIndex =
          this.imgIndex == this.bannerImg.length - 1 ? 0 : this.imgIndex + 1;
      }
    },
    handleScroll(e) {
      const element = this.$refs.imgList;
      if (element) {
        const position = element.getBoundingClientRect();
        if (position.y + position.height <= 0) {
          this.isShowImg = false;
        } else {
          this.isShowImg = true;
        }
      }
    },
    handleDot(val) {
      this.imgIndex = val;
    },
  },
};
</script>
<style lang="scss" scoped>
.images-box {
  position: relative;
  width: 100%;
  top: 0;
  height: 100vh;
  // max-height:100vh;
  // background-color: aquamarine;
}

.img-list {
  width: 100%;
  height: 100vh;
  // height: 700px;
  position: fixed;
  // max-height:100vh;
  top: 0px;
  z-index: -2;
  display: flex;
  align-items: center;
}

.nexticon {
  position: absolute;
  bottom: 10px;
}

.banner-img {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 80px;
}

.trigger {
  position: absolute;
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  top: 50%;
  // opacity: 0;
}

// .trigger:hover {
//   opacity: 1;
// }

.bottom-dot {
  display: flex;
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.pot-type {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  margin: 0 10px;
}

.pot-active {
  background: #fff;
}

.imgstyle {
  width: 100%;
  height: 100%;
  max-height:100vh;
}
.mobel-btn {

  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  // background: #333;
}

.right-btn {
  position: fixed;
  right: 50%;
  cursor: pointer;
  width: 14px;
  color: #fff;
  animation-name: heartbeat;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@keyframes heartbeat {
  0% {
    bottom: 15px;
  }
  100% {
    bottom: 25px;
  }
}
.show-img {
  animation-name: showimg;
  animation-duration: .5s;
}


// .right-btn {
//   cursor: pointer;
//   width: 30px;
//   color: #fff;
//   animation-name: heartbeat;
//   animation-duration: 1s;
//   animation-direction: alternate;
//   animation-iteration-count: infinite;
//   animation-timing-function: ease-out;
// }
.show-img {
  animation-name: showimg;
  animation-duration: .5s;
}

@keyframes showimg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hidd-img {
  animation-name: hiddimg;
  animation-duration: .5s;
}

@keyframes hiddimg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>